<template>
  <div>
    <p>
      {{ $store.state.user.class }}
    </p>
    <img :src="$store.state.classObj.userInfo.logo" alt="" />
    <input type="button" value="点击我更改mutations的值" @click="btn" />

    <hr />
    <!-- <p>getters:{{ $store.getters.sum }}</p> -->
    <p>getters:{{ $store.getters["getbooks/sum"] }}</p>

    <hr />
    <ul>
      <li></li>
      <li v-for="item in $store.state.newbooks" :key="item.img">
        <img :src="item.img" alt="" />
        <p>书名:{{ item.name }}</p>
        <p>价格:{{ item.price }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  created() {
    // 获取到state里面的名字
    console.log(this.$store.state.classObj.userInfo.name);
    // axios({
    //   url: "https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books",
    // }).then((res) => {
    //   console.log(res);
    //   // 通过commit把值给赋予给mutstiona
    //   this.$store.commit("setbooks", res.data.data);
    // });
    this.$store.dispatch("Agetbooks");
    
  },
  methods: {
    btn() {
      // this.$store.commit(
      //   "setLogo",
      //   "https://www.runoob.com/wp-content/uploads/2016/02/react.png"
      // );

      // 2.组件里面不推荐直接赋值,用严格语法会报错

      // 3.如果有两个或以上参数,用对象
      this.$store.commit("classObj/setLogo", {
        newlogo: "https://www.runoob.com/wp-content/uploads/2016/02/react.png",
        two: "我是第二个参数",
      });
    },
  },
};
</script>

<style>
img {
  width: 100px;
}
</style>